<template>
  <div class="list-page">
    <tool-bar nav="数据库连接:/dev/db-connection/list" :title="'生成实体-'+ info.name">
    </tool-bar>

    <!--    <kv label="概述">-->
    <!--      {{ info.name }}:-->
    <!--      <el-tag>{{ info.type }}</el-tag>-->
    <!--      <el-tag>{{ info.host }}</el-tag>-->
    <!--      <el-tag>{{ info.dbName }}</el-tag>-->

    <!--      <el-switch v-model="$data.withGroup" style="margin-left: 20px"></el-switch>-->
    <!--      <div v-if="$data.withGroup">分组</div>-->
    <!--      <div v-else>合并</div>-->
    <!--      <el-button size="small" style="margin-left:8px;" v-if="$data.withGroup" @click="save_group_click">保存分组-->
    <!--      </el-button>-->

    <!--      <el-switch v-model="$data.withCn" style="margin-left: 20px"></el-switch>-->
    <!--      <div v-if="$data.withCn">显示中文</div>-->
    <!--      <div v-else>仅显示英文</div>-->
    <!--    </kv>-->
    <!--    <kv label="表">-->

    <!--      <template v-if="$data.withGroup">-->
    <!--        <div v-for="(item) in group_tables" :key="item.key" class="gt bc5">-->
    <!--          <div>-->
    <!--            <kp :label="item.key">-->
    <!--              <input v-model="info.groupMap[item.key]"/>-->
    <!--            </kp>-->
    <!--            <button v-if="item.data.length > 2" @click="select(item)" style="margin-left: 6px">反选</button>-->
    <!--          </div>-->

    <!--          <selector style="width:80%" multi-->
    <!--                    :data="item.data"-->
    <!--                    v-model="$data.select_tables"-->
    <!--                    :enum-count="999"-->
    <!--                    :fields="$data.withCn ? 'id,nameWithCn':'name' "-->
    <!--          ></selector>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--      <div v-else class="gt">-->
    <!--        <selector style="width:80%" multi-->
    <!--                  :data="$data.tables"-->
    <!--                  v-model="$data.select_tables"-->
    <!--                  :enum-count="999"-->
    <!--                  :fields="$data.withCn ? 'id,nameWithCn':'name' "-->
    <!--        ></selector>-->
    <!--      </div>-->
    <!--    </kv>-->


    <tables-com :id="$props.id" @loaded="tables_loaded" @select="tables_select"></tables-com>

    <div style="display: flex;justify-content: center;align-items: center;">
      <kp label="级别">
        <el-input v-model="$data.level" style="width: 40px;"></el-input>
        <el-button @click="gen_click" type="primary">生成markdown</el-button>
        <remark style="margin-left: 5px;margin-right: 20px">
          <div>工作过程：</div>
          <div>1. 数据库设计</div>
          <div>2. 生成 markdown</div>
          <div>3. 导入飞书</div>
        </remark>
      </kp>


      <kp label="包名">
        <el-input v-model="$data.packageName" style="width: 120px;"></el-input>
        <el-button @click="myoql_click">下载kotlin-myoql实体类</el-button>
      </kp>


      <!--      <kp >-->
      <!--        <el-button @click="sql_click">生成表列备注sql</el-button>-->
      <!--      </kp>-->
    </div>

    <el-tabs v-model="$data.tab" type="card" ref="results">
      <el-tab-pane label="全部" name="all">
        <el-input type="textarea" :rows="24" v-model="$data.markdown_all"></el-input>
      </el-tab-pane>
      <el-tab-pane v-for="(item,key) in $data.group_markdown" :name="key" :label="key" :key="key">
        <el-input type="textarea" :rows="24" v-model="$data.group_markdown[key]"></el-input>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator at 2021-04-11 23:42:19
 */

import tablesCom from "./tables-com.vue";

defineOptions({
  name: "db-tables",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  level: 2,
  packageName: "",
  withGroup: true,
  withCn: true,
  tables: [],
  select_tables: [],
  table_url: "",
  info: {},
  DatabaseEnum: jv.enum.SqlDatabaseEnum.getData(),
  tab: "all",
  group_markdown: {},
  markdown_all: ""
});
const info = $computed(() => $data.info);

const $props = defineProps({
  action: {type: String},
  id: {type: String}
});

const action_name = $computed(() => {
  return {add: "添加", edit: "修改"}[$props.action]
});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const group_tables = $computed(function () {
  return $data.tables
      .groupBy(it => {
        if (it.comment.includes("-")) {
          return it.comment.split("-")[0].trim()
        } else {
          return it.name.split("_")[0]
        }
      })
      .sort((a, b) => {
        var g1 = $data.info.groupMap[a.key] || a.key;
        var g2 = $data.info.groupMap[b.key] || b.key;
        if (g1 == g2) {
          return a.data.length - b.data.length;
        }
        if (g1 > g2) {
          return 1;
        }
        return -1;
      });
});

// const save_group_click = () => {
//   if (!$props.id) return;
//   jv.$http.post("/dev/db-connection/" + $props.id + "/set-group", $data.info.groupMap);
// }


const tables_loaded = function (result) {
  $data.info = result.info || $data.info;
  $data.tables = result.tables || $data.tables;
}

const tables_select = function (result) {
  $data.select_tables = result;
}

// const loadData = function () {
//   if (!$props.id) return;
//   jv.$http.post("/dev/db-connection/detail/" + $props.id).then(res => {
//     $data.info = res.data.data;
//   });
//   jv.$http.post('/dev/db-entity/tables/' + $props.id).then(res => {
//     $data.tables = res.data.data.filter(it => !it.name.startsWith("flyway") && !it.comment.startsWith("-"));
//     $data.tables.forEach(it => {
//       it.id = it.name;
//       it.columns = it.columns.filter(it => !it.comment.startsWith("-"))
//       it.nameWithCn = it.name;
//       if (it.simpleComment) {
//         it.nameWithCn = it.name + " : " + it.simpleComment;
//       }
//     })
//   })
// };
// const select = function (group) {
//   group.data.map(it => it.id).forEach(it => {
//     if ($data.select_tables.includes(it)) {
//       $data.select_tables.removeItem(it);
//     } else {
//       $data.select_tables.push(it)
//     }
//   })
// };
const gen_click = function () {
  var tables = $data.tables.filter(it => !$data.select_tables.length || $data.select_tables.includes(it.id));
  $data.group_markdown = jv.dev.table_markdown(group_tables, $data.withGroup, $data.info.dbName, $data.info.groupMap, $data.level)
  $data.markdown_all = "生成时间 `" + Date.nowString("yyyy-MM-dd HH:mm") + "`\n" + Object.values($data.group_markdown).join("\n") + "\n";
};
const myoql_click = function () {
  if (!$data.packageName) {
    jv.error("请输入包名");
    return;
  }
  var query = {tables: $data.select_tables, packageName: $data.packageName};
  jv.downloadFile(window.SERVER_HOST + "/dev/db-connection/entities/download/" + $props.id
      + "?authorization=" + encodeURIComponent(jv.authorization) + "&" + jv.param(query))
};


const sql_click = () => {

}


</script>

<style scoped lang="scss">
.gt {
  padding: 8px;
  border-radius: 5px;
  margin: 2px;
}


.list-page .kv ::v-deep(.k) {
  flex: 1 !important;
}

::v-deep(.kp) input {
  border-width: 0;
}
</style>
